<template>
  <el-container style="height: 100vh; background: linear-gradient(to top left, #6a11cb, #2575fc);">
    <!-- 左侧导航栏 -->
    <el-aside width="180px" class="sidebar">
      <el-menu default-active="home" mode="vertical">
        <el-menu-item index="home" @click="navigateToHome">首页</el-menu-item>
        <el-menu-item index="restaurants" @click="navigateToRestaurants">餐厅</el-menu-item>
        <el-menu-item index="user" @click="navigateToUserProfile">个人信息</el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主体内容部分 -->
    <el-main class="main-content">
      <!-- 欢迎标题 -->
      <h1 class="welcome-title">欢迎来到惊喜一餐</h1>

      <!-- 推荐餐厅部分 -->
      <el-card class="feature-card">
        <h2>推荐餐厅</h2>
        <el-row :gutter="20">
          <el-col v-for="restaurant in recommendedRestaurants" :key="restaurant.id" :span="6">
            <el-card class="restaurant-card" shadow="hover">
              <img :src="restaurant.image" alt="restaurant" class="restaurant-img" />
              <h3>{{ restaurant.name }}</h3>
              <p>评分: {{ restaurant.rating }}⭐</p>
              <el-button type="primary" @click="navigateToDetail(restaurant.id)">查看详情</el-button>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

      <!-- 跳转到用户信息页按钮 -->
      <el-button type="success" @click="navigateToUserProfile" class="user-profile-button">前往个人信息</el-button>
    </el-main>
  </el-container>
</template>

<script>
import { useRouter } from "vue-router";

export default {
  data() {
    return {
      recommendedRestaurants: [
        { id: 1, name: '安师大·美味小厨', image: '/assets/img.png', rating: 4.8 },
        { id: 2, name: '安师大·健康餐馆', image: '/assets/restaurant2.jpg', rating: 4.6 },
        { id: 3, name: '安师大·日式料理', image: '/assets/restaurant3.jpg', rating: 4.7 },
        { id: 4, name: '安师大·西餐厅', image: '/assets/restaurant4.jpg', rating: 4.9 },
      ],
    };
  },
  setup() {
    const router = useRouter();

    // 跳转到餐厅详情页
    const navigateToDetail = (id) => {
      router.push(`/restaurant/${id}`);
    };

    // 跳转到用户信息页
    const navigateToUserProfile = () => {
      router.push('/user');
    };

    // 跳转到首页
    const navigateToHome = () => {
      router.push('/');
    };

    // 跳转到餐厅列表页
    const navigateToRestaurants = () => {
      router.push('/restaurants/:id');
    };

    return { navigateToDetail, navigateToUserProfile, navigateToHome, navigateToRestaurants };
  },
};
</script>

<style scoped>
/* 左侧导航栏 */
.sidebar {
  background-color: rgba(255, 255, 255, 0.9); /* 背景色调整 */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 修改菜单的样式 */
.el-menu {
  width: 100%;
  font-size: 8px;
}

.el-menu-item {
  color: #333;
}

.el-menu-item:hover {
  background-color: #42b983; /* 鼠标悬停时的颜色 */
}

.el-menu-item.is-active {
  background-color: #388e3c; /* 当前选中的颜色 */
}

/* 页面主体 */
.main-content {
  flex-grow: 1;
  padding: 40px 20px 20px; /* 调整主体内容的左右边距 */
  margin-left: 180px; /* 留出左侧导航栏宽度 */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容水平居中 */
  justify-content: flex-start; /* 内容从顶部开始 */
}

/* 欢迎标题样式 */
.welcome-title {
  font-size: 32px;
  color: #fff;
  margin-bottom: 20px;
}

/* 推荐餐厅部分 */
.feature-card {
  margin-top: 20px;
  padding: 20px;
  width: 80%; /* 控制推荐餐厅部分的宽度 */
  max-width: 1000px; /* 限制最大宽度 */
}

/* 餐厅卡片 */
.restaurant-card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.restaurant-card:hover {
  transform: translateY(-5px);
}

.restaurant-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.el-button {
  margin-top: 15px;
}

/* 优化用户信息按钮样式 */
.user-profile-button {
  margin-top: 20px;
  display: block;
  width: 200px; /* 改小按钮宽度 */
  text-align: center;
  padding: 10px;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  background-color: #42b983; /* 按钮背景色调整为绿色 */
  border-color: #42b983;
  transition: background-color 0.3s;
}

.user-profile-button:hover {
  background-color: #388e3c; /* 按钮 hover 时的颜色 */
  border-color: #388e3c;
}
</style>
